<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="85px"
        style="width: 45%; padding-top: 10px; margin-right: 220px"
        :disabled="pageType == 'look'">
        <el-form-item label="活动标题" prop="activity_name">
            <el-input v-model="formData.activity_name" maxlength="15" show-word-limit placeholder="请输入标题名称" />
        </el-form-item>
        <el-form-item label="活动分组" prop="group_id">
            <el-cascader
                ref="cascaderRef"
                v-model="formData.group_id"
                style="width: 100%"
                :props="defaultProps"
                :options="groupOptions"
                @change="orgChange" />
        </el-form-item>
        <el-form-item label="活动有效期" prop="">
            <el-radio-group v-model="formData.period_type">
                <el-radio :label="1">永久</el-radio> <el-radio :label="2">固定期限</el-radio>
            </el-radio-group>
            <el-form-item v-if="formData.period_type === 2" prop="activity_time">
                <el-date-picker
                    v-model="formData.activity_time"
                    type="datetimerange"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="—"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="defaultTime()"
                    :disabled-date="time => time.getTime() < Date.now() - 8.64e7" />
            </el-form-item>
        </el-form-item>
        <!-- <el-form-item label="活动说明">
      <el-input placeholder="请输入活动说明" v-model="formData.description" maxlength="50" show-word-limit :rows="6" type="textarea" />
    </el-form-item> -->
    </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref, defineExpose, withDefaults, defineProps } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { getGroupList } from '@/api/concreation';
import { defaultTime } from '@/utils/utils';

interface Props {
    pageType: any;
    group_id: any;
}
const props = withDefaults(defineProps<Props>(), {
    pageType: '',
    group_id: 0
});
const emit = defineEmits(['submit']);
const formRef = ref<FormInstance>();
const cascaderRef: any = ref(null); // 选择分组ref
const groupOptions = ref([]);
const formData = ref({
    activity_name: '', // 活动标题
    group_id: props.group_id == 'all' ? 0 : props.group_id, //分组ID //分组id
    period_type: 1, // 活动有效期 1-固定 2-永久
    activity_time: [], //  有效期
    description: ''
});
const rules = reactive({
    activity_name: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
    group_id: [{ required: true, message: '请选择活动分组', trigger: 'change' }],
    period_type: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }],
    activity_time: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
});
const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
};
// 获取活动分组
const onGroupgList = async () => {
    const res = await getGroupList({ type: 19, name: '' });
    groupOptions.value = res.data;
};
// 选择完地区后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};
const onSubmit = async () => {
    if (!formRef.value) return;
    await formRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            emit('submit');
        } else {
            ElMessage.warning(Object.values(fields)[0][0].message);
        }
    });
};
onGroupgList();
defineExpose({
    onSubmit,
    formData
});
</script>
